<script setup lang="ts">
import { Container, ContainerPort } from "@/views/domain/kubeHud/api/k8s/types";
import { onMounted, ref, watch } from "vue";
import KTable from "../../components/KTable.vue";

type Prop = {
  containers?: Container[];
};

const props = defineProps<Prop>();

const ports = ref<ContainerPort[]>([]);

const resetPortsFromContainers = (cs: Container[]) => {
  ports.value = cs.flatMap(c => c.ports || []);
};

onMounted(() => {
  resetPortsFromContainers(props.containers || []);
});

watch(
  () => props.containers,
  cs => {
    resetPortsFromContainers(cs || []);
  }
);
</script>

<template>
  <div class="k-table-wrapper">
    <el-table :data="ports" table-layout="auto">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="containerPort" label="容器端口" />
      <el-table-column prop="protocol" label="协议" />
    </el-table>
  </div>
</template>
<style lang="scss">
.k-table-wrapper {
  --k-table-border-width: 5px;

  width: 100%;
  padding: 0 var(--k-table-border-width) var(--k-table-border-width)
    var(--k-table-border-width);
  background-color: var(--el-bg-color-page);
  .el-table {
    --el-table-header-bg-color: var(--el-bg-color-page);
  }
}
</style>
